import React from 'react';
import switchImg from './imgs/switch.svg';
import './Joureny.css';

export default function Joureny(props) {
    const { from, to, exchangeFromTo, showCitySelector } = props;
    return (
        <div className="joureny">
            <div className="joureny-station" onClick={() => showCitySelector(true)}>
                <input
                    name="from"
                    value={from}
                    readOnly
                    className="joureny-input joureny-from"
                />
            </div>
            <div className="joureny-switch" onClick={() => exchangeFromTo()}>
                <img src={switchImg} width="70" height="40" alt="switch-icon" />
            </div>
            <div className="joureny-station" onClick={() => showCitySelector(false)}>
                <input
                    name="to"
                    value={to}
                    readOnly
                    className="joureny-input joureny-to"
                />
            </div>
        </div>
    )
}
